<template>
  <div>
    <van-tabbar route>
      <van-tabbar-item to="/">
        <template #icon="props">
          <img :src="props.active ? homeIcon.active : homeIcon.inactive" />
        </template>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/course">
        <template #icon="props">
          <img :src="props.active ? courseIcon.active : courseIcon.inactive" />
        </template>
        <span>课程</span>
      </van-tabbar-item>
      <van-tabbar-item to="/record">
        <template #icon="props">
          <img :src="props.active ? recordIcon.active : recordIcon.inactive" />
        </template>
        <span>约课记录</span>
      </van-tabbar-item>
      <van-tabbar-item to="/practice">
        <template #icon="props">
          <img
            :src="props.active ? practiceIcon.active : practiceIcon.inactive"
          />
        </template>
        <span>练习</span>
      </van-tabbar-item>
      <van-tabbar-item to="/my">
        <template #icon="props">
          <img :src="props.active ? userIcon.active : userIcon.inactive" />
        </template>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      homeIcon: {
        active: require("../assets/theme-img/home-active.png"),
        inactive: require("../assets/theme-img/home.png"),
      },
      courseIcon: {
        active: require("../assets/theme-img/course-active.png"),
        inactive: require("../assets/theme-img/course.png"),
      },
      recordIcon: {
        active: require("../assets/theme-img/study-active.png"),
        inactive: require("../assets/theme-img/study.png"),
      },
      practiceIcon: {
        active: require("../assets/theme-img/course-active.png"),
        inactive: require("../assets/theme-img/course.png"),
      },
      userIcon: {
        active: require("../assets/theme-img/user-active.png"),
        inactive: require("../assets/theme-img/user.png"),
      },
    };
  },
};
</script>